
<template>
  <div class="dx-detail-container">
    <div class="dx-header-container">
      <div><i class="dx-layer" /><span>请选择项目：</span></div>
      <div>
        <!-- <i class="el-icon-close" @click="closeContainer" /> -->
        <el-input
          placeholder="请输入应用名称"
          v-model="input3"
          @input="inputChange"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="inputChange"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="dx-body-container">
      <div
        v-for="(item, index) in tableList"
        :key="item.id"
        class="list-container"
        @click="selectProject(item)"
      >
        <label>{{ index + 1 }} </label>
        <span class="pro-name">{{ item.name }}</span>
        <span class="pro-time">{{ item.creareTime }}</span>
        <span class="pro-unit">{{ item.unit }}</span>
        <!-- <div>
          <router-link
            tag="i"
            :to="{ name: 'AppDetail', query: { id: item.id } }"
            class="el-icon-view"
          />
          <router-link
            tag="i"
            :to="{ name: 'AppForm', query: { type: 'add', id: item.id } }"
            class="el-icon-plus"
          />
          <router-link
            tag="i"
            :to="{ name: 'AppForm', query: { type: 'edit', id: item.id } }"
            class="el-icon-edit"
          />
          <i class="el-icon-delete" @click="delTheData(item.id)" />
        </div> -->
      </div>
    </div>
    <div class="dx-footer-container" v-if="!input3">
      <Pagination
        :total="parameters.total"
        :page="parameters.page"
        :limit="parameters.limit"
        @pagination="changePagination"
      />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue";
import DataOptions from "./dataOptions";
export default {
  name: "DataDisplay",
  data() {
    return {
      parameters: {
        page: 1,
        total: 81,
        limit: 20,
      },
      input3: "",
      tableList: [],
      paramsID: {},
    };
  },
  created() {
    this.tableList = DataOptions.slice(0, this.parameters.limit);
  },
  components: {
    Pagination,
  },
  methods: {
    // 切换分页
    changePagination(data) {
      this.parameters.page = data.page;
      this.settableList();
    },
    // 处理数据
    settableList() {
      const s = (this.parameters.page - 1) * this.parameters.limit + 0;
      const e =
        (this.parameters.page - 1) * this.parameters.limit +
        this.parameters.limit;
      this.tableList = DataOptions.slice(s, e);
    },
    // 输入框
    inputChange() {
      if (this.input3) {
        this.tableList = DataOptions.filter((item) =>
          item.name.includes(this.input3)
        );
      } else {
        this.settableList();
      }
    },
    // 点击选择项目
    selectProject(data) {
      this.$confirm(`请确认${data.name}为选中项目`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClick(row) {
    },
    delTheData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.dx-body-container {
  .pro-name {
    flex: 1;
  }
  .pro-time {
    width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pro-unit {
    width: 200px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.data-display {
  position: absolute;
  top: 160px;
  left: 2px;
  height: calc(100vh - 200px);
  width: 430px;
  z-index: 100000;
  // background-color: rgba(0, 0, 0, 0.618);
  // background-color: rgba(0, 48, 64, 0.8);
  background-color: #3f4854;
  box-sizing: border-box;
  // box-shadow: 0 0 2px #fff, 0 0 2px #fff inset;
  padding: 0 10px;
  overflow: hidden;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-radius: 6px;
  // border: 1px solid #73ffff !important;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style>
.dx-detail-container .el-input__inner {
  background-color: transparent;
}

.dx-detail-container .el-input-group__append,
.dx-detail-container .el-input-group__prepend {
  background-color: transparent;
  vertical-align: middle;
  color: #fff;
  font-size: 20px;
}
</style>
